<template>
    <nav>
        <img src="../assets/Logo.png" alt="Logo">
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/service">服务</router-link>
        <router-link to="/loginAndRegister" v-if="!isLoggedIn">登录/注册</router-link>
        <router-link to="/profile" v-else>
            <span>你好，{{ userName }}</span>
            <span>/</span>
            <span @click="logout">注销</span>
        </router-link>
    </nav>


</template>

<script>

export default {
    name: 'NavBar',
    data() {
        return {
            isLoggedIn: !!localStorage.getItem('token') && !!localStorage.getItem('user_name')
        }
    },
    computed: {
        userName() {
            return localStorage.getItem('user_name');
        }
    },
    watch: {
        '$route': function() {
            this.isLoggedIn = !!localStorage.getItem('token') && !!localStorage.getItem('user_name');
        }
    },
    methods: {
        logout() {
            localStorage.removeItem('token');
            localStorage.removeItem('user_name');
            location.reload();
        }
    }
}
</script>

<style scoped>
nav {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    border-top: black solid 6px;
}
nav a {
    font-weight: bolder;
    color: #333;
    text-decoration: none;
    margin: 0 10px;
    display: inline-block;
    vertical-align: middle;
}
nav a:hover {
    background-color: #cbc7c7;
}
nav img {
    height: 100px;
    margin-right: 550px;
    vertical-align: middle;
}
nav img:hover {
    filter: drop-shadow(0 0 1em #000000aa);
}
</style>